<template>
<div class="Anonymous">
    <div class="header">
        <span>当前位置：</span>
        <span @click="goYi" class="hover-red">网上举报></span>
        <span class="blue">匿名举报</span>
    </div>
    <div class="Xz">
        <img src="@/assets/image/编组1.png" alt />
    </div>
    <div class="yi">被举报人（单位）信息</div>
    <div class="er">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- 单位 -->
            <div class="danwei-box">
                <span class="before-xin">单位</span>
                <el-select v-model="ruleForm.name" placeholder="请选择被举报认单位" @change="change">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </div>

            <!-- 举报人姓名 -->
            <div class="name">
                <el-form-item label="被举报人姓名" prop="personName">
                    <el-autocomplete class="inline-input" v-model="ruleForm.personName" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect" type="text" :maxlength='255' show-word-limit></el-autocomplete>
                </el-form-item>
            </div>
            <!-- 职务 -->
            <el-form-item label="职务" prop="personPost">
                <el-input v-model="ruleForm.personPost" placeholder="请输入被举报人职务" type="text" :maxlength='255' show-word-limit></el-input>
            </el-form-item>
            <!-- 级别 -->
            <el-form-item label="级别" prop="personRank">
                <el-input v-model="ruleForm.personRank" placeholder="请输入被举报人级别" type="text" :maxlength='255' show-word-limit></el-input>
            </el-form-item>

            <!-- 举报正文 -->
            <div class="san">举报正文</div>
            <!-- 举报正文================================================================= -->
            <!-- 标题 -->
            <div class="si">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title" placeholder="请输入标题 < 50字符" class="wu" type="text" :maxlength='50' show-word-limit></el-input>
                </el-form-item>
            </div>
            <!-- 问题类型 -->
            <el-form-item label="问题类型" prop="issueType">
                <el-select v-model="ruleForm.issueType" placeholder="请选择类型" class="six" @change="TypeChange">
                    <el-option v-for="item in questionType" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                </el-select>
            </el-form-item>
            <!-- 问题详细 -->
            <el-form-item label="问题细类" prop="issueChildType">
                <el-select v-model="ruleForm.issueChildType" placeholder="请选择细类" class="seven">
                    <el-option v-for="item in questionDetail" :key="item.itemValue" :label="item.itemName" :value="item.itemValue"></el-option>
                </el-select>
            </el-form-item>
            <!-- 举报问题 -->
            <el-form-item label="举报问题" prop="content">
                <el-input v-model="ruleForm.content" type="textarea" placeholder="请输入举报问题（ < =3000字符 ）" class="eight" maxlength="3000" show-word-limit></el-input>
            </el-form-item>
            <!-- 图片上传======================================================================== -->
            <!-- 上传 -->
            <div class="sc">上传附件</div>
            <div class="upload">
                <span class="fj">附件</span>
                <!-- 上传附件 -->
                <div class="upload-demo-box">
                    <el-upload class="upload-demo" action="#" :http-request="httpRequest" :on-remove="handleRemove" :file-list="fileList" :limit="5" multiple list-type="picture" style="margin-left:15px" :on-change="PicUploadChange" :before-upload="beforeAvatarUpload" accept=".avi,audio/mp4, video/mp4,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf,.png,.jpg,.jpeg,application/vnd.ms-excel" :show-file-list="false">
                        <el-button size="small" type="primary" icon="el-icon-upload2">上传附件</el-button>
                        <div slot="tip" class="el-upload__tip">请上传后缀名为pdf，mp4，avi，jpg，png，jpeg，xls，xlsx，doc，docx的附件，最多可同时上传5个文件，每个文件不大于30M。</div>
                    </el-upload>
                    <div class="img-box">
                        <div class="img-item" v-for="(item,index) in attachList2" :key="index">
                            <img v-if="item.name==='pdf'" src="@/assets/image/pdfpic.png" alt />
                            <img v-if="item.name==='doc'" src="@/assets/image/wordpic.png" alt />
                            <img v-if="item.name==='docx'" src="@/assets/image/wordpic.png" alt />
                            <img v-if="item.name==='mp4'" src="@/assets/image/mp4pic.png" alt />
                            <img v-if="item.name==='avi'" src="@/assets/image/avipic.png" alt />
                            <img v-if="item.name==='xls'" src="@/assets/image/excelpic.png" alt />
                            <img v-if="item.name==='xlsx'" src="@/assets/image/excelpic.png" alt />

                            <img v-if="item.name==='jpg'" :src="baseUrl+item.url" alt />
                            <img v-if="item.name==='png'" :src="baseUrl+item.url" alt />
                            <img v-if="item.name==='jpeg'" :src="baseUrl+item.url" alt />
                            <span @click="removePic(index)">x</span>
                        </div>
                    </div>

                </div>

            </div>
            <!-- 图形验证码 -->
            <el-form-item prop="captcha" label="图形验证码" class="yanzhengma-box">
                <el-input v-model="ruleForm.captcha" class="el-input__inner inpurt-2" placeholder="请输入图形验证码" type="text" maxlength="4" show-word-limit />

                <span class="code-img" @click="getPicAnonymous">
                    <!--
            <s-identify :identifyCode="identifyCode"></s-identify>

            -->
                    <img :src="imgUrl" alt />
                </span>
                <div class="right">
                    <el-tooltip class="item" effect="light" content="看不清请点击图片刷新（区分大小写）" placement="right">
                        <el-button>?</el-button>
                    </el-tooltip>
                </div>
            </el-form-item>
            <!-- 举报人信息 -->
            <div class="sc">举报人信息</div>
            <div class="jbxx">
                <!-- 姓名 -->
                <el-form-item label="姓名">
                    <el-input v-model="ruleForm.peoplename" type="text" maxlength="255" show-word-limit></el-input>
                </el-form-item>
                <!-- 身份证号 -->
                <el-form-item label=" 身份证号">
                    <el-input v-model="ruleForm.idCard" type="text" maxlength="255" show-word-limit></el-input>
                </el-form-item>
                <!-- 联系方式 -->
                <el-form-item label="联系方式">
                    <el-input v-model="ruleForm.contactInfo" maxlength="255" clearable show-word-limit></el-input>
                </el-form-item>
                <!-- 政治面貌 -->
                <el-form-item label="政治面貌">
                    <el-input v-model="ruleForm.politicalOutlook" type="text" maxlength="255" show-word-limit></el-input>
                </el-form-item>
                <!-- 现居住地址 -->
                <el-form-item label="现居地址">
                    <el-input v-model="ruleForm.resideAddress" type="text" maxlength="255" show-word-limit></el-input>
                </el-form-item>
                <!-- 工作单位 -->
                <el-form-item label="工作单位">
                    <el-input v-model="ruleForm.orgName" type="text" maxlength="255" show-word-limit></el-input>
                </el-form-item>
            </div>
        </el-form>
        <!-- 确认举报 -->

        <el-button type="primary" class="submit" @click="GoInquiryCode('ruleForm')">确认举报</el-button>
    </div>
</div>
</template>

<script>
export default {
    components: {},
    data() {
        var contactInfoRule = (rule, value, callback) => {
            var uPattern = /^[0-9]*$/;
            let res = uPattern.test(value);
            if (res) {
                callback();
            } else {
                callback("请输入正确的联系方式");
            }
        };
        return {
            //---------------------------------------------------------------------------------
            attachList2: [],
            //举报时需要传入的参数
            paramsAll: {
                personOrgId: "",
                personName: "",
            },
            // 单位下拉框数据
            options: [],
            //被举报人姓名输出建议列表
            restaurants: [],
            //问题细类请求的参数
            ReportQusetionParams: {
                typeCode: "ISSUE_TYPE",
                pItemValue: "",
            },
            //问题类型下拉框
            questionType: [],
            //问题细类下拉框
            questionDetail: [],
            // 图片上传
            fileList: [],
            //表单提交时图片上传的数据
            attachList: [],
            //图形验证码的获取
            imgUrl: "",
            ruleForm: {
                // 单位
                name: "",
                //被举报人姓名
                personName: "",
                //职务
                personPost: "",
                //级别
                personRank: "",
                //标题
                title: "",
                //问题类型
                issueType: "",
                //问题细类
                issueChildType: "",
                //举报内容
                content: "",
                //验证码收纳筐
                captcha: "",
                //被举报人姓名
                peoplename: "",
                idCard: "",
                contactInfo: "",
                politicalOutlook: "",
                resideAddress: "",
                orgName: "",

                //------------------------------------------------------------------------------
            },
            //点击举报时需要向后台传递的参数
            rules: {
                name: [{
                        required: true,
                        message: "请选择被举报人单位",
                        trigger: "blur"
                    },
                    // { min: 1, max: 10, message: "长度在1 到 10 个字符", trigger: "blur" },
                ],
                personName: [{
                        required: true,
                        message: "请输入被举报人姓名",
                        trigger: "blur"
                    },
                    // { min: 1, max: 255, message: "最大长度：255", trigger: "blur" },
                ],
                personPost: [{
                        required: true,
                        message: "请输入被举报人职务",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 255,
                        message: "最大长度：255",
                        trigger: "blur"
                    },
                ],
                personRank: [{
                        required: true,
                        message: "请输入被举报人级别",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 255,
                        message: "最大长度：255",
                        trigger: "blur"
                    },
                ],
                title: [{
                        required: true,
                        message: "请输入标题 < 50字符",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 50,
                        message: "长度在1 到 50 个字符",
                        trigger: "blur"
                    },
                ],
                issueType: [{
                    required: true,
                    message: "请选择类型",
                    trigger: "blur"
                }],
                issueChildType: [{
                    required: true,
                    message: "请选择问题细类",
                    trigger: "blur"
                }, ],
                captcha: [{
                        required: true,
                        message: "验证码不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 4,
                        max: 4,
                        message: "请输入四位验证码",
                        trigger: "blur"
                    },
                ],
                content: [{
                        required: true,
                        message: "请输入举报问题 (<= 3000字符)",
                        trigger: "blur",
                    },
                    {
                        min: 1,
                        max: 3000,
                        message: "请输入举报问题 (<= 3000字符)",
                        trigger: "blur",
                    },
                ],
                contactInfo: [{
                        required: true,

                        message: "请输入联系方式",
                        trigger: "blur",
                    },
                    {
                        validator: contactInfoRule,
                        message: "请输入正确的联系方式",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {
        baseUrl() {
            return this.$store.state.fileIp;
        },

    },
    filters: {
        filename(value) {
            return value.replace(/.+\./, "");
        }
    },
    //生命周期（页面起初加载的）
    mounted() {},
    created() {
        //获取单位下拉框列表
        this.getCompanyList();
        //问题类型和细类下拉
        this.getquestion();
        this.getPicAnonymous();
    },
    methods: {
        removePic(index) {
            this.attachList.splice(index, 1)
            this.fileList.splice(index, 1)
            this.attachList2.splice(index, 1)
        },
        //联调代码开始-----------------------------------------------------------------------
        //获取单位列表
        getCompanyList() {
            this.Api.getReportCompanyList().then((res) => {
                // console.log(res, "获取单位列表");
                if (res.code === "0") {
                    this.options = res.data;
                    this.$set(this.paramsAll, "personOrgId", res.data.id);
                }
            });
        },
        //单位下拉框选中时触发change事件
        change() {
            this.Api.getReportNameList({
                id: this.ruleForm.name,
            }).then((res) => {
                console.log(res, "根据单位返回的被举报人姓名列表");
                if (res.code === "0") {
                    for (let i = 0; i < res.data.length; i++) {
                        this.restaurants.push({
                            value: res.data[i].personName,
                            address: res.data[i].personPost,
                        });
                    }
                    // this.restaurants = res.data;
                    // console.log(this.restaurants,"xingming列表")
                }
            });
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ?
                restaurants.filter(this.createFilter(queryString)) :
                restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (
                    restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
                    0
                );
            };
        },
        //点击选中建议时触发的方法
        handleSelect(item) {
            console.log(item);
            this.ruleForm.personPost = item.address;
        },
        //举报正文------------------------
        // 问题类型和细类下拉
        getquestion() {
            this.Api.getReportQuestion(this.ReportQusetionParams).then((res) => {
                // console.log(res, "获取问题类型列表");
                if (res.code === "0") {
                    this.questionType = res.data;
                }
            });
        },
        //问题类型选则后触发获取问题细类的列表
        TypeChange() {
            this.Api.getReportQuestion({
                pItemValue: this.ruleForm.issueType,
                typeCode: "ISSUE_CHILD_TYPE",
            }).then((res) => {
                // console.log(res, "获取问题细类列表");
                this.questionDetail = res.data;
            });
        },
        //图片上传=====================================
        httpRequest() {
            return;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        //图片上传时自动触发
        PicUploadChange(file, fileList) {

            let newfileList = fileList;
            // console.log(newfileList, "newfileList")
            newfileList.forEach((item) => {
                let formData = new FormData();
                var FileExt = item.name.replace(/.+\./, "");
                if (["jpg", "png", "jpeg"].indexOf(
                        FileExt.toLowerCase()
                    ) !== -1) {
                    formData.append("file", item.raw);
                    this.Api.uploadImage(formData).then(res => {
                        console.log(res, "tupian")
                        this.$set(item, "picUrl", res.data.url);
                        this.$set(item, "picUrl2", res.data.miniUrl);
                        this.attachList = [];
                        this.attachList2 = [];
                        newfileList.forEach((value) => {
                            var FileExt2 = value.name.replace(/.+\./, "");
                            this.attachList.push({
                                name: value.name,
                                url: value.picUrl,
                                size: value.size,
                            });
                            this.attachList2.push({
                                name: FileExt2,
                                url: value.picUrl2,
                            });
                        });

                        console.log(this.attachList, "attachList");
                    })
                } else {
                    formData.append("multipartFile", item.raw);
                    this.Api.uploadText(formData).then((res) => {
                        console.log(res, "wenjian")
                        this.$set(item, "picUrl", res.data.url);
                        this.$set(item, "picUrl2", res.data.miniUrl);
                        this.attachList = [];
                        this.attachList2 = [];
                        newfileList.forEach((value) => {
                            var FileExt2 = value.name.replace(/.+\./, "");
                            this.attachList.push({
                                name: value.name,
                                url: value.picUrl,
                                size: value.size,
                            });
                            this.attachList2.push({
                                name: FileExt2,
                                url: value.picUrl2,
                            });
                        });
                        console.log(this.attachList, "attachList");
                    })
                }
            });
        },
        //图片上传之前触发
        beforeAvatarUpload(file) {
            var FileExt = file.name.replace(/.+\./, "");
            if (
                ["pdf", "mp4", "avi", "jpg", "png", "jpeg", "xls", "xlsx", "doc", "docx"].indexOf(
                    FileExt.toLowerCase()
                ) === -1
            ) {
                this.$message({
                    type: "warning",
                    message: "请上传指定格式的文件！",
                });
                return false;
            }
        },
        //匿名举报图片获取
        getPicAnonymous() {
            this.Api.getPicAnonymous().then((res) => {
                const _this = this;
                var buf = new Uint8Array(res);
                var reader = new FileReader();
                reader.readAsText(new Blob([buf]), "utf-8");
                reader.onload = function () {
                    if (typeof reader.result == "string") {
                        if (reader.result.indexOf("code") > -1) {
                            let _res = JSON.parse(reader.result);
                            if (_res.code) {
                                _this.imgUrl = "";
                                if (!_this.loginFalse) {
                                    _this.loginFalse = true;
                                }
                                _this.loginFalseMessage = _res.msg;
                            }
                        } else {
                            _this.imgUrl =
                                "data:image/png;base64," +
                                btoa(
                                    buf.reduce(
                                        (data, byte) => data + String.fromCharCode(byte),
                                        ""
                                    )
                                );
                        }
                    }
                };
            });
        },
        // 跳转验证码页面
        goYi() {
            this.$router.push("/ReportOnInternet");
        },
        GoInquiryCode(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.Api.PushReportForm({
                        personOrgId: this.ruleForm.name,
                        personName: this.ruleForm.personName,
                        personPost: this.ruleForm.personPost,
                        personRank: this.ruleForm.personRank,
                        title: this.ruleForm.title,
                        issueType: this.ruleForm.issueType,
                        issueChildType: this.ruleForm.issueChildType,
                        content: this.ruleForm.content,
                        attachList: this.attachList,
                        captcha: this.ruleForm.captcha,
                        name: this.ruleForm.peoplename,
                        idCard: this.ruleForm.idCard,
                        contactInfo: this.ruleForm.contactInfo,
                        politicalOutlook: this.ruleForm.politicalOutlook,
                        resideAddress: this.ruleForm.resideAddress,
                        orgName: this.ruleForm.orgName,
                    }).then((res) => {
                        // console.log(res, "表单提交");
                        if (res.code === "0") {
                            this.$message.success("举报成功");
                            this.$router.push({
                                name: "InquiryCode",
                                params: {
                                    data: res.data
                                },
                            });
                        } else if (res.code === "405") {
                            this.$message.warning("验证码失效，请刷新");
                        }
                        // this.$router.push({ name: "Result" });
                    });
                } else {
                    this.$message.warning("加*为必填项，请补充完整");
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-form-item__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
}

// /deep/.yanzhengma-box .el-form-item__content > .el-form-item__error {
//   left: 133px;
// }

.Xz {
    width: 210px;
    height: 49px;
    padding-top: 66px;
    padding-left: 40px;
}

.header {
    width: 1200px;
    height: 54px;
    margin: 0 auto;
    background-color: #f2f2f2;
    margin-top: 21px;
}

span {
    color: #666666;
    font-size: 14px;
}

.blue {
    color: #1677ff;
}

.yi {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding-left: 40px;
    margin-top: 62px;
}

.er {
    margin-top: 39px;
    margin-left: 42px;
}

// 修改
/deep/.el-input__inner {
    width: 420px;
}

// 修改
/deep/.el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    display: flex;
    padding: 0;
}

/deep/.wu>input {
    width: 991px;
}

/deep/.six input {
    width: 991px;
}

/deep/.seven input {
    width: 991px;
}

/deep/.eight input {
    width: 991px;
}

/deep/.el-form-item__label {
    width: 114px !important;
    padding: 0 0 0 5px;
    margin-right: 30px;
}

/deep/.el-form {
    display: flex;
    flex-wrap: wrap;
}

/deep/.el-textarea {
    margin-left: 12px;
}

.san {
    margin-top: 80px;
    width: 100%;
    height: 22px;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
}

.si {
    margin-top: 35px;
}

/**滚动条盒子 */
/deep/.el-textarea__inner {
    width: 991px;
    height: 456px;
    margin-left: -10px;
    overflow-x: hidden;
    overflow-y: scroll;
}

/**滚动条样式 */
/deep/.el-textarea__inner::-webkit-scrollbar-thumb {
    border-radius: 10px !important;

    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;

    background: rgba(221, 221, 221, 1) !important;
}

/deep/.el-textarea__inner::-webkit-scrollbar {
    width: 10px !important;
}

/deep/.el-textarea__inner::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

/deep/.el-textarea__inner::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    background: white !important;
}

/**滚动条样式 到这结束*/
.sc {
    margin-top: 52px;
    width: 100%;
    height: 22px;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
}

/deep/.el-upload-list__item {
    width: 80px;
    height: 80px;
    margin-right: 16px;
}

/deep/.el-upload-list {
    display: flex;
}

.upload {
    width: 100%;
    margin-top: 46px;
    display: flex;
}

.fj {
    margin-left: 70px;
    margin-right: 28px;
}

/deep/.el-button {
    width: 118px;
    height: 36px;
    background: none;
    color: #666666;
    font-size: 12px;
    border: 1px solid #dddddd;
}

.jbxx {
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
}

.queren {
    width: 234px;
    height: 52px;
    background: rgba(20, 123, 253, 1);
    box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
    border-radius: 5px;
    border: none;
    font-size: 20px;
    color: #fff;
    margin-left: 483px;
    margin-top: 88px;
}

.submit {
    width: 234px;
    height: 52px;
    background: rgba(20, 123, 253, 1);
    box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
    border-radius: 5px;
    border: none;
    font-size: 20px;
    color: #fff;
    margin-left: 483px;
    margin-top: 88px;
}

/**样式补充调整 */
.hover-red:hover {
    color: red;
    cursor: pointer;
}

/*查询码输入框和图片的盒子 */
/deep/.yanzhengma-box {
    position: relative;
    width: 579px;
    margin-top: 20px;

    .el-form-item__content {
        >.el-input__inner {
            padding: 0;
            border: 0;

            >.el-input__inner {
                width: 325px;
            }
        }
    }
}

/*文本 */
.text-xin {
    display: inline-block;
    width: 96px;
    text-align: right;
}

.code-img {
    position: absolute;
    right: 15px;
    bottom: -14px;
    display: inline-block;

    img {
        width: 84px;
        height: 38px;
        border-radius: 4px;
    }
}

.text-tishi {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    margin-left: 129px;
}

/*星号 */
.text-xin:before {
    content: "* ";
    color: red;
}

/deep/.inpurt-2 {
    width: 325px;
}

/**提示文字 */
/deep/.el-button--default {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    color: rgba(153, 153, 153, 1);
    border: 1px solid rgba(153, 153, 153, 1);
    position: absolute;
    right: -16px;
    bottom: 9px;
}

/deep/.el-form-item__label:before {
    content: "";
    color: #f56c6c;
    margin-right: 4px;
}

//文字加*号
.before-xin::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
}

.before-xin {
    margin-right: 23px;
}

.danwei-box {
    margin-left: 82px;
}

//上床图片的展示
.upload-demo-box {
    .img-box {
        display: flex;

        .img-item {
            display: flex;
            width: 80px;
            height: 80px;
            justify-content: center;
            align-items: center;
            // background-color: #FEEFEF;
            // border: 1px solid #ddd;
            position: relative;
            margin: 15px;

            img {
                width: 80px;
                height: 80px;
            }

            span {
                display: inline-block;
                position: absolute;
                width: 14px;
                height: 14px;
                top: -7px;
                right: -7px;
                border: 1px solid #666;
                border-radius: 50%;
                background-color: #666;
                color: white;
                text-align: center;
                line-height: 11px;
                cursor: pointer;
            }
        }
    }

}
</style>
